<template>
  <div class="mod-user">
    <el-card class="box-card" style="width:80%;margin:0 auto;">
      <span  class="clear">商品规格：</span>
      <div class="dadiv">
        <el-card class="box-card2">
          <span class="yanse">颜色</span>
          <div>
            <el-checkbox label="金色 删除"></el-checkbox>
            <el-checkbox label="银色 删除"></el-checkbox>
          </div>
          <div>
            <el-input placeholder="请输入内容" class="input"></el-input>
            <el-button>增加</el-button>
          </div>
          <span>容量</span>
          <div class="canshu">
            <el-checkbox label="16GB"></el-checkbox>
            <el-checkbox label="32GB"></el-checkbox>
            <el-checkbox label="64GB"></el-checkbox>
            <el-checkbox label="128GB"></el-checkbox>
          </div>
        </el-card>

        <!-- 订单列表数据 -->
        <el-table border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column label="颜色" prop="order_number"></el-table-column>
          <el-table-column label="容量" prop="order_price"></el-table-column>
          <el-table-column label="销售价格" prop="order_price"></el-table-column>
          <el-table-column label="商品库存" prop="pay_status">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
              <el-tag type="danger" v-else>未付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="库存预警值" prop="is_send">
            <template slot-scope="scope">
              <template>{{scope.row.is_send}}</template>
            </template>
          </el-table-column>
          <el-table-column label="SKU编号" prop="create_time">
            <template slot-scope="scope">{{scope.row.create_time | dateFormat}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button size="mini" type="primary" icon="el-icon-edit" @click></el-button>
              <el-button size="mini" type="success" icon="el-icon-location"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn">
          <el-button type="primary" color="#409EFF">刷新列表</el-button>
          <el-button type="primary">价格同步</el-button>
          <el-button type="primary">同步库存</el-button>
        </div>
      </div>
      <!-- <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>

      </el-checkbox-group>-->
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checkList: ['选中且禁用', '复选框 A'],
      value1: true,
      value2: true,
      transferTypes: [
        { type: 1, typeTitle: '芒果' },
        { type: 2, typeTitle: '种子' }
      ],
      dataForm: {
        type: 1,
        memberName: '',
        num: '',
        password: ''
      },
      rules: {
        type: [{ required: true, message: '请选择转账类型', trigger: 'blur' }],
        memberName: [
          { required: true, message: '请输入收款用户名', trigger: 'blur' }
        ],
        num: [{ required: true, message: '转出数额不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入您的二级密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    transfer () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/transfer'),
            method: 'post',
            data: this.$http.adornData({
              type: this.dataForm.type,
              memberName: this.dataForm.memberName,
              num: this.dataForm.num,
              password: this.dataForm.password
            })
          }).then(({ data }) => {
            if (data && data.status === 200) {
              this.$message.success(data.message)
            } else {
              this.$message.error(data.message)
            }
          })
        }
      })
    }
  }
}
</script>
<style >
/* .el-card__body {
  width: 100%;
} */
.el-card {
  border: 0px;
  /* float: left; */
  /* margin-left: 200px; */
}
.btn {
  margin-top: 10px;
}
.input {
  width: 150px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-card__header {
  border-bottom: 0px;
}
.canshu {
  margin-top: 20px;
}
.yanse {
  display: block;
  margin-bottom: 20px;
}
.dadiv {
  margin-left: 40px;
}
.clear{
  /* display: block; */
  /* float: left; */

    margin-left: -15px;

}
.box-card2{
  background-color: #F8F9FC;
   border-radius:20px;
}
.el-table--border{
  margin-top: 20px;

}
</style>
